/*
 * @Description: 我的审核列表
 * @Author: Rfan
 * @Date: 2023-02-10 15:56:42
 * @LastEditTime: 2023-02-10 16:29:49
 */

import { FC, useEffect, useMemo, useState } from 'react';
import { Button, Space, Table, Tag } from 'antd';
import classNames from 'classnames/bind';
import { observer } from 'mobx-react-lite';
import update from 'immutability-helper';
import { formatDate } from '@/utils';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useMyApprovalsContext } from '../contexts/MyApprovalsContext';
import ApprovalDialog from './dialogs/ApprovalDialog';
import { EnumTaskState } from '../dictionaries';
import type { IPageQuery } from '@/interfaces/global';
import type { ITaskListResolve } from '@/api/workFlow/task';
import styles from '../styles/list.module.scss';

const cx = classNames.bind(styles);

const { Column } = Table;

export type ApproveListProps = {
  title?: string;
  data?: any;
};

const ApprovalsList: FC<ApproveListProps> = () => {
  const formatMessage = useFormatMessage();
  const { approveList, listQuery, setListQuery, getApprovalsList, stateFilter } =
    useMyApprovalsContext();
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [selectData, setSelectData] = useState<ITaskListResolve>(null);
  // 审核弹窗显示标志
  const [approvalDialogFlag, setApprovalDialogFlag] = useState(false);

  /**
   * @description: 参数变更，如切换页面请求列表
   */
  useEffect(() => {
    setLoading(true);
    getApprovalsList(listQuery)
      .then((res: any) => {
        setTotal(res?.totalCount);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [listQuery]);

  /**
   * @description: 打开通知弹窗方法
   */
  const showApproveDialogFunc = (record: ITaskListResolve, type: number) => {
    // showApproveDialog(record, type);
    setSelectData(record);
    setApprovalDialogFlag(true);
  };

  // 切换页码触发
  const pageChange = (page: number, pageSize: number) => {
    setListQuery(
      update(listQuery, {
        $apply: (state: IPageQuery) => ({
          ...state,
          pageNo: page,
          pageSize
        })
      })
    );
  };

  return (
    <div className={cx('approve-list')}>
      <Table
        dataSource={approveList}
        loading={loading}
        rowKey="processInstanceId"
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column
          title="申请类型"
          dataIndex="processDefinitionName"
          key="processDefinitionName"
          align="center"
        />
        {/* <Column title="提供单位" align="center" /> */}
        <Column title="申请人" dataIndex="startUserName" key="startUserName" align="center" />
        <Column
          title="申请时间"
          dataIndex="startTime"
          key="startTime"
          align="center"
          render={(text) => formatDate(text)}
        />

        <Column
          title="审批结束时间"
          dataIndex="endTime"
          key="endTime"
          align="center"
          render={(text) => formatDate(text)}
        />
        <Column
          title="状态"
          dataIndex="taskState"
          key="taskState"
          align="center"
          render={(text) => <Tag>{stateFilter(text)}</Tag>}
        />
        {/* <Column */}
        {/*  title="利用方式" */}
        {/*  dataIndex={['applyForm', 'useTypeEntity']} */}
        {/*  key="useTypeEntity" */}
        {/*  align="center" */}
        {/* /> */}
        {/* <Column title="通知状态" align="center" /> */}
        {/* <Column */}
        {/*  title="审批开始时间" */}
        {/*  dataIndex="startTime" */}
        {/*  key="startTime" */}
        {/*  align="center" */}
        {/*  render={(text) => formatDate(text)} */}
        {/* /> */}
        {/* <Column */}
        {/*  title="剩余利用天数" */}
        {/*  dataIndex={['applyForm', 'useDay']} */}
        {/*  key="useDay" */}
        {/*  align="center" */}
        {/* /> */}
        <Column
          title={formatMessage('tableAction')}
          key="action"
          align="center"
          render={(_text, record: ITaskListResolve) => (
            <Space>
              {record.taskState === EnumTaskState.Active && (
                <Button
                  type="link"
                  onClick={() => {
                    showApproveDialogFunc(record, 1);
                  }}
                >
                  开始审批
                </Button>
              )}
            </Space>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <ApprovalDialog
            visible={approvalDialogFlag}
            data={selectData}
            onClose={() => {
              setApprovalDialogFlag(false);
            }}
          />
        ),
        [approvalDialogFlag]
      )}
    </div>
  );
};

export default observer(ApprovalsList);
